@ms-w: 768px;
@xs-w:430px;

* {
    margin : 0;
    padding: 0;
}

a {
    text-decoration: none;
    color          : rgb(236, 236, 236);
    transition     : .2s;

    &:hover {
        color: var(--base-color) !important;
    }
}

body {
    background-color: rgba(230, 230, 230, 0.1);
}

main {
    position: relative;

    .top-info {
        position        : fixed;
        top             : 0;
        left            : 0;
        width           : 100%;
        height          : 40px;
        background-color: #456;
        padding         : 0 0 0 20px;
        z-index         : 111;

        .logo {
            font-size  : 18px;
            line-height: 36px;
            color      : aliceblue;
        }

        .info {
            position: absolute;
            top     : 9px;
            right   : 50px;
            color   : rgb(161, 161, 161);
        }
    }

    .left-nav {
        position        : fixed;
        top             : 40px;
        left            : 0;
        width           : 200px;
        background-color: #456;
        height          : 100%;
        color           : rgb(251, 253, 255);
        z-index         : 11;
        @media (max-width: @ms-w) {
            width: 150px;
        }
        @media (max-width: @xs-w) {
            width: 100px;
        }

        ul {
            list-style    : none;
            padding-inline: 0;
            text-align    : center;

            li {
                padding: 10px 0;

                &:hover {
                    background-color: rgba(240, 248, 255, 0.151);
                    cursor          : pointer;
                }

                &.active {
                    background-color: aliceblue;
                    color           : #456;
                }
            }
        }
    }

    .content {
        margin-right       : 30px;
        margin-top         : 50px;
        margin-left        : 220px;
        // background-color: rgba(48, 48, 48, 0.432);
        @media (max-width: @ms-w) {
            margin-left: 160px;
            margin-right       : 10px;
        }
        @media (max-width: @xs-w) {
            margin-left: 100px;
        }

        .manage {
            padding  : 10px;
            font-size: 18px;

            h1 {
                margin-bottom: 14px;
            }

            .manage-item {
                margin: 16px 0;

                input {
                    width: 50%;
                    padding      : 4px;
                    border-radius: 4px;
                    border       : 1px solid rgba(68, 68, 68, 0.473);
                    @media (max-width:@ms-w) {
                        width: 100%;
                    }
                }
            }

            .submit {
                margin-top: 20px;
                width     : 100%;

                input {
                    width        : 50%;
                    font-size    : 20px;
                    padding      : 10px;
                    border-radius: 10px;
                    border       : 1px solid rgba(68, 68, 68, 0.466);

                    &:hover {
                        cursor          : pointer;
                        background-color: rgb(206, 206, 206);
                        border          : 1px solid #444;
                    }
                }
            }
        }
    }
}